<template>
  <div>
    <van-popup v-model="show" round closeable @close="close">
      <div class="box-item">
        <van-sticky>
          <div class="title">{{ form.title }}</div>
        </van-sticky>

        <div class="content">
          <span v-html="renderedContent"></span>
        </div>
        <dz-safe></dz-safe>
        <div class="botton">
          <dz-button @click="close"><qq>confirm</qq></dz-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {newsRecord} from "@/api/apiFox";
  import {getItem, setItem} from "@/utils/auth";

  export default {
    data(){
      return{
        show:false,
        content:'',
        form:{}
      }
    },
    computed: {
      renderedContent() {
        return this.content.replace(/<img(.*?)src="(.*?)"(.*?)>/g, (match, p1, p2, p3) => {
          return `<img${p1}src="${p2}" style="width: 100% !important;border-radius:15px">`;
        });
      }
    },
    methods:{
      close(){
        this.show = false
        setItem('tip',1)
      },
      getList(){
        let form = {
          language: "ZH_EN",
          officialType: 14
        }
        newsRecord(form).then(res=>{
          if (res && res.length>0){
            this.form = res[0]
            this.show=true
            this.content = this.form.dzcontent
          }else{
            this.show=false
          }
        }).catch(err=>{})
      }
    },
    mounted() {
      if (getItem('tip')){

      }else{
        this.getList()
      }

    }
  }
</script>

<style scoped lang="scss">
  .box-item{
    width: 350px;
    min-height: 400px;
    background: #fff;
    border-radius: 10px;
    padding: 16px 16px;
    box-sizing: border-box;
    max-height: 600px;
    overflow-y: scroll;
    .title{
      height: 40px;
      background: #fff;
      width: 100%;
      line-height: 40px;
      font-size: 16px;
      text-align: center;
      font-weight: 700;
      color: #3F3F3F;
    }
    .content{
      margin-top: 15px;
      width: 100%;
      font-size: 14px;
      color: #666666;
      line-height: 24px;
    }
    .botton{
      position: absolute;
      width: 100%;
      bottom: 10px;
      padding: 0 15px;
      box-sizing: border-box;
      left: 0;
    }
  }
</style>